<template>
  <div>
    <!-- <div class="header" @click="changeTheme">
        <div class="header-left"></div>
        <div class="header-title">网易云音乐</div>
        <div class="header-right" @click.stop="$router.push({path:'/accout'})"></div>
    </div> -->
    <div class="header" @click="changeTheme">
      <div class="header-left">
        <!-- 不是直接插槽设置样式 -->
        <slot name="left">左边</slot>
      </div>
      <div class="header-title">
        <slot name="center">网易云音乐</slot>
      </div>
      <div class="header-right">
        <slot name="right">右边</slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data: function () {
    return {
      themes: ["theme", "theme1", "theme2"],
      index: 0,
    };
  },
  methods: {
    changeTheme() {
      this.index++;
      if (this.index >= this.themes.length) {
        this.index = 0;
      }
      document.documentElement.setAttribute(
        "data-theme",
        this.themes[this.index]
      );
    },
  },
};
</script>
<style scoped lang="scss">
@import "../assets/css/variable";
@import "../assets/css/mixin";
.header {
  width: 100%;
  height: 100px;
  // background-color: #f00;
  @include bg_color();
  display: flex;
  justify-content: space-between;
//   align-items: center;
  // position: relative;
  // z-index: 999;
  .header-right,
  .header-left {
    width: 84px;
    height: 84px;
    line-height: 84px;
    margin-top: 5px;
    * {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
